<template >
  <div class="market-shareholders">
    <info :memberInfo="{ type: '市场股东' }">
      <template #redact>
        <div class="redact">编辑<img src="" /></div>
      </template>
      <template #postscript>
        <textarea placeholder="备注信息"></textarea>
      </template>
      <template #additionalContent>
        <div class="market-shareholders__indate">
          <div>有效期：2021-03-15 13:59:59 至 2022-03-15 23:59:59</div>
          <button @click="terminateAgreementActive = true">解约</button>
        </div>
      </template>
      <template #btn>
        <div class="member-info__btn">
          <div>
            <label>
              <input type="radio" name="btn" checked>
              <div>钱包</div>
            </label>
            <label>
              <input type="radio" name="btn">
              <div>奖励</div>
            </label>
            <label>
              <input type="radio" name="btn">
              <div>订单记录</div>
            </label>
          </div>
          <div @click="registerDrawerActive = true">
            注册会员
          </div>
        </div>
      </template>
      <template #numerical>
        <div class="member-info__particulars">
          <div class="member-info__particulars--title">钱包信息</div>
          <div>
            <div class="member-info__particulars--body">
              <div>
                <img />
                <div class="money">99996.25</div>
                <div class="name">至尊 - 钱包</div>
                <div class="btn">
                  <div @click="modifyListDrawer = true">修改</div>
                  <div>充值</div>
                  <div @click="particularsListDrawer = true">明细</div>
                </div>
              </div>
            </div>
            <div class="member-info__particulars--body">
              <div>
                <img />
                <div class="money">99996.25</div>
                <div class="name">至尊 - 钱包</div>
                <div class="btn">
                  <div @click="modifyListDrawer = true">修改</div>
                  <div>充值</div>
                  <div @click="particularsListDrawer = true">明细</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </info>
  </div>
  <register-drawer></register-drawer>
  <modify-list></modify-list>
  <particulars-list></particulars-list>
  <n-drawer class="terminate-agreement" style="--n-header-border-bottom: 0;" v-model:show="terminateAgreementActive"
    width="63%">
    <n-drawer-content body-style="--n-body-padding:0;">
      <template #header>
        <div class="my-title--primary">市场股东解约</div>
      </template>
      <div class="terminate-agreement__content">
        <div class="terminate-agreement__content--info">
          <img />
          <div>
            <div>李嘉贤 136 7894 5698</div>
            <div>
              <div>会员类型：市场股东</div>
              <div>本店会员：是</div>
            </div>
          </div>
        </div>
        <div class="terminate-agreement__content--contract">
          <div>合同期限：2021-11-15 13:59:59 至 2022-11-15 23:59:59</div>
          <div>合同状态：<span>未到期</span></div>
        </div>
        <div class="terminate-agreement__content--send-back">
          <div>
            <div class="my-title--primary">退回金额</div>
            <label>
              <input type="number" placeholder="请输入金额" />
              <div></div>
            </label>
          </div>
          <div>
            <div class="my-title--primary">退回方式</div>
            <div>
              <button>微信</button>
            </div>
          </div>
        </div>
        <div class="terminate-agreement__content--tip">
          <div>
            <div></div>提示
          </div>
           <ul>
            <li>解约后，当前会员等级、及积分将恢复到签约前等级。</li>
          </ul>
        </div>
      </div>
      <template #footer>
        <button class="my-btn--primary">确认</button>
      </template>
    </n-drawer-content>
  </n-drawer>
</template>

<script setup>
import {
  ref,
  provide
} from 'vue';
import info from './@fragment/info.vue';
import registerDrawer from './@fragment/register.vue';
import modifyList from './@fragment/modify-list.vue';
import particularsList from './@fragment/particulars-list.vue';
let registerDrawerActive = ref(false),
  modifyListDrawer = ref(false),
  showInvitationCode = ref(false),
  particularsListDrawer = ref(false),
  terminateAgreementActive = ref(false);
provide('registerDrawerActive', registerDrawerActive);
provide('modifyListDrawer', modifyListDrawer);
provide('particularsListDrawer', particularsListDrawer);
provide('showInvitationCode', showInvitationCode);

</script>

<style lang="less" scoped>
.market-shareholders {
  &__indate {
    display: flex;
    align-items: center;
    font-size: 26px;
    color: #4A5060;

    >div {
      margin: 0 21px;
    }

    >button {
      width: 68px;
      height: 44px;
      color: #FE9900;
      background: #FCF4E8;
      border: 1px solid #FE9900;
      border-radius: 5px;
      text-align: center;
      line-height: 44px;
    }
  }
}

.terminate-agreement {
  * {
    line-height: 1;
  }

  .my-title--primary {
    display: flex;
    align-items: center;

    &::before {
      position: initial;
      margin-right: 11px;
    }
  }

  &__content {
    margin: 0 30px;

    &--info {
      display: flex;
      padding: 30px;
      height: 150px;
      background-color: #ccc;
      box-sizing: border-box;

      img {
        margin-right: 20px;
        width: 48px;
        height: 48px;
        background-color: #FE9900;
      }

      >div {

        >div:first-child {
          font-size: 30px;
          font-weight: bold;
          color: #2E323D;
          line-height: 48px;
        }

        >div:last-child {
          display: flex;
          margin-top: 9px;
          font-size: 24px;
          color: #4A5060;

          >div:first-child {
            margin-right: 383px;
          }
        }
      }
    }

    &--contract {
      margin-top: 39px;
      font-size: 22px;
      color: #4A5060;

      >div:last-child {
        margin-top: 18px;

        span {
          color: #FE9900;
        }
      }
    }

    &--send-back {
      margin-top: 39px;

      >div:first-child {
        >label {
          position: relative;
          display: block;
          margin-top: 26px;
          width: 100%;
          height: 80px;

          >input {
            padding: 0 28px;
            width: 100%;
            height: 100%;
            font-size: 26px;
            border: 1px solid #E5E5E5;
            border-radius: 5px;
            box-sizing: border-box;

            &:focus {
              border: 1px solid #1981F4;
            }

            &::placeholder {
              font-weight: 500;
              color: #999;
            }
          }

          >input:focus+div {
            display: block;
          }

          >input+div {
            position: absolute;
            display: none;
            right: 0;
            top: 50%;
            width: 48px;
            height: 48px;
            background: #2E323D;
            transform: translateY(-50%);
          }
        }
      }

      >div:last-child {
        margin-top: 40px;

        >div:last-child {
          margin-top: 26px;

          button {
            width: 158px;
            height: 60px;
            font-size: 22px;
            font-weight: 400;
            color: #4A5060;
            background: #F8F8F8;
            border: 1px solid #E5E5E5;
            border-radius: 4px;
          }
        }
      }
    }

    &--tip {
      margin-top: 30px;
      padding: 20px;
      height: 154px;
      background: #FFF7EC;
      border-radius: 5px;
      box-sizing: border-box;

      >div:first-child {
        display: flex;
        align-items: center;
        font-size: 22px;
        font-weight: 400;
        color: #4A5060;

        div {
          margin-right: 12px;
          width: 24px;
          height: 24px;
        }

      }

      ul {
        list-style-type: disc;
        margin: 19px 0 0 58px;

        li {
          font-size: 22px;
          &::marker {
            font-size: 22px;
            color: #666;
          }
          color:#ff8800;
        }
      }
    }

  }
}
</style>